<template>
  <lb-layout
    class="app-container energyCoal"
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
    :needfixBtn="false"
  >
    <!-- <lb-layout> -->
    <!-- 查询 or 新增 or 编辑-->
    <el-row>
      <el-col :span="21">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          class="query-form"
        >
          <el-form-item
            v-show="showSearch"
            label="标准煤折算系数版本号:"
            prop="version"
          >
            <el-select
              size="small"
              v-model="queryParams.versionid"
              placeholder="请选择"
              @change="handleSelectver"
              :disabled="!editFlage"
              v-hasPermi="['energy:manage:list']"
            >
              <el-option
                v-for="(item, index) in versionsArr"
                :key="index"
                :label="item.version"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-show="!showSearch"
            :rules="addRules.versionName"
            prop="versionName"
          >
            <!-- <el-input
                size="small"
                v-model="queryParams.versionName"
                placeholder="标准煤折算系数版本号"
                clearable
              ></el-input> -->
            <div>
              <span>版本号 </span>
              <span v-if="queryParams.versionName" class="versionName-span">
                {{ queryParams.versionName }}
              </span>
              <span v-else class="versionName-span2">将自动生成</span>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
              v-show="addFlage && editFlage"
              v-hasPermi="['energy:manage:list']"
            >
              搜索
            </el-button>
            <el-button
              icon="el-icon-refresh"
              size="small"
              @click="handleresetQuery"
              v-show="addFlage && editFlage"
              v-hasPermi="['energy:manage:list']"
            >
              重置
            </el-button>
            <el-button
              icon="el-icon-edit"
              size="small"
              type="primary"
              v-show="addFlage && publishStatus && editFlage"
              @click="handleEdit"
              v-hasPermi="['energy:manage:edit']"
            >
              编辑
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="3" class="button-area-ex">
        <el-button
          :type="addFlage ? 'text' : 'primary'"
          size="small"
          :plain="addFlage"
          icon="el-icon-plus"
          :disabled="!editFlage"
          v-show="editFlage"
          @click="handleAdd"
          v-hasPermi="['energy:manage:edit']"
        >
          {{ addFlage ? "新增版本" : "确认" }}
        </el-button>
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          :disabled="!addFlage"
          v-show="!editFlage"
          @click="handleEdit"
          v-hasPermi="['energy:manage:edit']"
        >
          保存
        </el-button>
        <el-button
          type="primary"
          v-show="!addFlage || !editFlage"
          plain
          size="small"
          @click="handleCancel"
        >
          取消
        </el-button>
        <el-button
          type="text"
          v-show="publishStatus && addFlage && editFlage"
          size="small"
          icon="el-icon-upload2"
          @click="handlePublish"
          v-hasPermi="['energy:manage:audit']"
        >
          发布
        </el-button>
      </el-col>
    </el-row>

    <div class="table-area">
      <!-- 表格标题 -->
      <!-- <div class="table-title">
        <Title
          name="能源折算标准煤系数和换算"
          :needcontainer="false"
          :line="false"
        ></Title>
      </div> -->

      <!-- 表格 -->
      <el-row>
        <el-col :span="24" class="scollstyle">
          <el-form :model="listform" ref="tableForm" :rules="listRules">
            <el-table
              :data="listform.list"
              border
              style="width: 100%"
              height="570"
            >
              <!-- show-summary 合计 -->
              <el-table-column prop="type" label="能源种类" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'list.' + scope.$index + '.type'"
                    :rules="listRules.type"
                    v-show="!inputFlage"
                  >
                    <el-select
                      class="cell-center"
                      size="small"
                      v-model="scope.row.type"
                      :disabled="inputFlage"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in dict.type.energy_source_type"
                        :key="index"
                        :label="item.label"
                        :value="Number(item.value)"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <dict-tag
                    class="type-tag"
                    v-show="inputFlage"
                    :options="dict.type.energy_source_type"
                    :value="scope.row.type + ''"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="实物量单位" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'list.' + scope.$index + '.unit'"
                    :rules="listRules.unit"
                    v-show="!inputFlage"
                  >
                    <!-- <el-input
                      class="cell-center"
                      size="small"
                      v-model="scope.row.unit"
                      :readonly="inputFlage"
                    ></el-input> -->
                    <el-select
                      class="cell-center"
                      style="width: 100%"
                      size="small"
                      v-model="scope.row.unit"
                      filterable
                      allow-create
                      :disabled="inputFlage"
                    >
                      <el-option
                        v-for="(item, index) in commonOptions"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <div v-show="inputFlage" class="cell-span">
                    {{ scope.row.unit }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="coefficient"
                label="折算标准煤系数(kgce) M"
                align="center"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'list.' + scope.$index + '.coefficient'"
                    :rules="listRules.coefficient"
                    v-show="!inputFlage"
                  >
                    <el-input
                      class="cell-center"
                      size="small"
                      type="number"
                      v-model.number="scope.row.coefficient"
                      :readonly="inputFlage"
                      @input="
                        (val) => {
                          replaceDigitDeal(val, 5, scope.$index, 'coefficient');
                        }
                      "
                    ></el-input>
                  </el-form-item>
                  <div v-show="inputFlage" class="cell-span">
                    {{ scope.row.coefficient }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="lowPrice"
                label="CO2（kg）N"
                align="center"
              >
                <template slot-scope="scope">
                  <div class="cell-span">
                    {{
                      (scope.row.coefficient * scope.row.displacement).toFixed(
                        4
                      )
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="displacement" label="N / M" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'list.' + scope.$index + '.displacement'"
                    :rules="listRules.displacement"
                    v-show="!inputFlage"
                  >
                    <el-input
                      class="cell-center"
                      size="small"
                      type="number"
                      v-model.number="scope.row.displacement"
                      :readonly="inputFlage"
                      @input="
                        (val) => {
                          replaceDigitDeal(
                            val,
                            5,
                            scope.$index,
                            'displacement'
                          );
                        }
                      "
                    ></el-input>
                  </el-form-item>
                  <div v-show="inputFlage" class="cell-span">
                    {{ scope.row.displacement }}
                  </div>
                  <!-- <div class="cell-span">
                    {{ 2.493 }}
                  </div> -->
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="300"
                v-if="!inputFlage"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="text"
                    icon="el-icon-delete"
                    class="text-danger"
                    @click="handleDelete(scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-col>
      </el-row>
      <!-- 增行按钮 -->
      <div class="addbutton-area" v-show="!addFlage || !editFlage">
        <div class="midbutton">
          <el-button
            type="text"
            size="small"
            icon="el-icon-plus"
            @click="addRow"
          >
            新增一行
          </el-button>
        </div>
      </div>
      <!-- 网址 电话 文件 -->
      <el-row>
        <el-col :span="24">
          <el-form
            :model="addParams"
            size="small"
            ref="addform"
            :rules="addRules"
          >
            <el-row style="margin-top: 20px" class="midrow">
              <el-col
                :xs="xsObj"
                :sm="smObj"
                :md="mdObj"
                :lg="lgObj"
                :class="['midcol', inputFlage ? 'midcolmini' : '']"
              >
                <el-form-item label="国家能源网址:" prop="website">
                  <el-input
                    v-show="!inputFlage"
                    size="small"
                    v-model="addParams.website"
                    style="width: 250px"
                  ></el-input>
                  <el-tooltip
                    popper-class="show-tooltip"
                    effect="light"
                    :content="addParams.website"
                    :disabled="addParams.website.length >= 30 ? false : true"
                    placement="top"
                    v-show="inputFlage"
                  >
                    <div class="sapn-input">
                      <span>{{ addParams.website }}</span>
                    </div>
                  </el-tooltip>
                </el-form-item>
              </el-col>
              <el-col
                :xs="xsObj"
                :sm="smObj"
                :md="mdObj"
                :lg="lgObj"
                :class="['midcol', inputFlage ? 'midcolmini' : '']"
              >
                <el-form-item
                  label="舟山能源信息客服热线电话:"
                  prop="servicePhone"
                >
                  <el-input
                    size="small"
                    v-model="addParams.servicePhone"
                    style="width: 250px"
                    v-show="!inputFlage"
                  ></el-input>
                  <div v-show="inputFlage" class="sapn-input">
                    <span>{{ addParams.servicePhone }}</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="midrow">
              <el-col
                :span="24"
                :class="[
                  'midcol',
                  'inline-col',
                  inputFlage ? 'midcolmini' : '',
                ]"
              >
                <el-form-item label="依据政策文件:" prop="officialFileId">
                  <el-select
                    v-show="!inputFlage"
                    size="small"
                    v-model="addParams.officialFileId"
                    style="width: 250px"
                    @visible-change="handleSelectfile"
                  >
                    <el-option
                      v-for="item in officialFileArr"
                      :key="item.id"
                      :label="item.documentTitle"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <el-tooltip
                    popper-class="show-tooltip"
                    effect="light"
                    :content="addParams.officialFile"
                    :disabled="
                      addParams.officialFile.length >= 30 ? false : true
                    "
                    placement="top"
                    v-show="inputFlage"
                  >
                    <div class="sapn-input">
                      <span>{{ addParams.officialFile }}</span>
                    </div>
                  </el-tooltip>
                </el-form-item>
                <el-button
                  @click="preview"
                  icon="el-icon-download"
                  type="text"
                  size="small"
                >
                  文件预览
                </el-button>
              </el-col>
            </el-row>
            <el-row class="midrow" v-show="inputFlage">
              <el-col
                :xs="xsObj"
                :sm="smObj"
                :md="mdObj"
                :lg="lgObj"
                :class="['midcol', inputFlage ? 'midcolmini' : '']"
              >
                <el-form-item label="制定时间:" prop="activeTime">
                  <span>
                    {{ addParams.activeTime }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col
                :xs="xsObj"
                :sm="smObj"
                :md="mdObj"
                :lg="lgObj"
                :class="['midcol', inputFlage ? 'midcolmini' : '']"
              >
                <el-form-item label="失效时间:" prop="inactiveTime">
                  <span>
                    {{ addParams.inactiveTime }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- </lb-layout> -->
  </lb-layout>
</template>

<script>
import {
  listCoalmanageversion,
  listCoalmanage,
  addCoalemanage,
  editCoalemanage,
  auditCoalmanage,
} from "@/api/energyconsumption/coal";
import { getPlatelist } from "@/api/basicdata/uploadManage"; // 获取政策文件集合
import {
  validWeburl,
  validPhoe,
  validMoney,
  validVersions,
} from "@/utils/validate.js";
import { deepClone, replaceDigit } from "@/utils/index";
import exFooter from "@/views/configuration/standard/components/ex-footer.vue";
export default {
  name: "energyCoal",
  components: {
    exFooter,
  },
  dicts: ["energy_source_type"],
  data() {
    return {
      xsObj: {
        span: 12,
      },
      smObj: {
        span: 12,
      },
      mdObj: {
        span: 12,
      },
      lgObj: {
        span: 8,
      },
      xlObj: {
        span: 8,
      },
      showSearch: true, // 显示搜索条件
      // 查询参数
      queryParams: {
        versionid: null,
        versionName: null,
      },
      versionsArr: [], // 版本号集合
      // 表格数据
      listform: {
        list: [],
      },
      listRules: {
        // version: [
        //   { required: true, message: "版本号不能为空", trigger: "blur" },
        // ],
        type: [
          { required: true, message: "能源种类不能为空", trigger: "blur" },
        ],
        unit: [
          { required: true, message: "实物量单位不能为空", trigger: "blur" },
        ],
        coefficient: [
          { required: true, message: "标准煤系数不能为空", trigger: "blur" },
          { validator: this.validMoneytest },
        ],
        displacement: [
          { required: true, message: "N/M不能为空", trigger: "blur" },
          { validator: this.validMoneytest },
        ],
      },
      inputFlage: true, // 输入框钩子
      editFlage: true, // 编辑钩子
      addFlage: true, // 新增版本钩子
      publishStatus: false, // 发布钩子
      /* ......................数据交互...................... */
      // 新增参数
      addParams: {
        website: "", // 电网地址
        servicePhone: "", // 热线电话
        officialFile: "", // 依据文件
        officialFileId: null, // 依据文件ID
        activeTime: "", // 生效时间
        inactiveTime: "", // 失效时间
      },
      // addVersionname: null,
      addRules: {
        website: [
          { required: true, message: "网址不能为空", trigger: "blur" },
          { validator: this.validURLtest },
        ],
        servicePhone: [
          { required: true, message: "热线电话不能为空", trigger: "blur" },
          { validator: this.validPhoetest },
        ],
        officialFileId: [
          { required: true, message: "依据政策文件不能为空", trigger: "blur" },
        ],
        // versionName: [
        //   { required: true, message: "版本号不能为空", trigger: "blur" },
        //   { validator: this.validVersionstest },
        // ],
      },
      officialFileArr: [], // 政策文件集合
      // 规格配置单行数据结构
      rowObj: {
        type: null, // 能源种类
        unit: null, // 实物量单位
        coefficient: 0, // 标准煤系数
        displacement: 0, // N/M
      },
      commonOptions: ["kwh", "L", "kg", "MJ", "立方", "小时人"],
    };
  },
  created() {
    this.requestPlatelist();
  },
  mounted() {
    this.initializeGet();
  },
  methods: {
    /* 自定义校验 */
    validURLtest(rule, value, callback) {
      if (!validWeburl(value)) {
        callback("网址名称格式不正确");
      } else {
        callback();
      }
    },
    validPhoetest(rule, value, callback) {
      if (!validPhoe(value)) {
        callback("热线电话格式不正确");
      } else {
        callback();
      }
    },
    validMoneytest(rule, value, callback) {
      if (!validMoney(value, 5)) {
        callback("系数格式不正确");
      } else {
        if (value > 999.99999) {
          callback("系数最大为999.99999");
        } else {
          callback();
        }
      }
    },
    validVersionstest(rule, value, callback) {
      if (!validVersions(value)) {
        callback("版本号只能为11位数字");
      } else {
        callback();
      }
    },
    // 输入框输入只能是5位小数
    replaceDigitDeal(val, digit, index, key) {
      this.listform.list[index][key] = replaceDigit(val, digit);
    },
    async initializeGet(versionID) {
      const aa = await this.getVersions(versionID);
      if (aa) {
        const bb = await this.handleQuery();
      }
    },
    // todo 查询版本对应配置列表
    getList() {
      let params = {};
      params.id = this.queryParams.versionid;
      this.$store.commit("app/updateApiCount", "add");
      listCoalmanage(params)
        .then((res) => {
          console.log(res, "版本对应配置列表");
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.listform.list =
            res?.data?.energyConversionFactorCoalDetailVoList ?? [];
          // 发布按钮状态
          this.publishStatus = res?.data?.status == 0 ? true : false;
          // 赋予新增参数数据
          this.addParams.website = res?.data?.website ?? "";
          this.addParams.servicePhone = res?.data?.servicePhone ?? "";
          this.addParams.officialFile = res?.data?.officialFile ?? "";
          this.addParams.officialFileId = res?.data?.officialFileId ?? 0;
          this.addParams.activeTime = res?.data?.activeTime ?? "暂无生效时间";
          this.addParams.inactiveTime =
            res?.data?.inactiveTime ?? "暂无失效时间";
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!20015");
        });
    },
    // todo 请求版本号的集合
    getVersions(versionID) {
      return new Promise((resolve, reject) => {
        listCoalmanageversion()
          .then((res) => {
            console.log(res, "版本号集合");
            if (res.code === 200) {
              this.versionsArr = res.data;
              if (this.versionsArr.length > 0) {
                if (versionID == undefined) {
                  this.queryParams.versionid = this.versionsArr[0]?.id ?? 0;
                  this.queryParams.versionName =
                    this.versionsArr[0]?.version ?? "";
                  resolve(true);
                } else {
                  if (versionID == "add") {
                    // 新增
                    // this.versionsArr.map((item) => {
                    //   if (item.version == this.addVersionname) {
                    //     this.queryParams.versionid = item.id;
                    //     this.queryParams.versionName = item.version;
                    //   }
                    // });
                    this.queryParams.versionid = this.versionsArr[0].id;
                    this.queryParams.versionName = this.versionsArr[0].version;
                    console.log(this.queryParams, "查询参数变成新增的");
                    resolve(true);
                  } else {
                    // 修改
                    console.log(this.queryParams, "查询参数不变");
                    resolve(true);
                  }
                }
                resolve(true);
              }
            }
          })
          .catch((error) => {
            // this.$message.error("系统错误,请联系管理员!20024");
          });
      });
    },
    // 下拉请求政策文件集合
    handleSelectfile(falge) {
      if (falge) {
        this.requestPlatelist();
      }
    },
    // todo 获取政策文件集合
    requestPlatelist() {
      getPlatelist("2")
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          // console.log(res, 123123);
          this.officialFileArr = res?.data ?? [];
        })
        .catch((error) => {
          // this.$message.error("系统错误,请联系管理员!300804");
        });
    },
    //! 搜索
    handleQuery() {
      if (
        this.queryParams.versionid !== "" &&
        this.queryParams.versionid !== null
      ) {
        // 搜索请求
        this.getList();
      } else {
        this.$message.warning("搜索必须先确定版本号");
      }
    },
    //! 重置按钮
    handleresetQuery() {
      this.resetQuery();
      this.initializeGet();
    },
    //? 重置搜索表单
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        versionid: null,
        versionName: null,
      };
    },
    //? 重置新增表单
    resetAdd() {
      this.resetForm("addform");
    },
    //? 清空表格
    restTable() {
      this.listform.list = [];
    },
    //? 条件搜索框和输入框可否输入
    changeFlage(status) {
      this.inputFlage = status;
      this.showSearch = status;
    },
    //* 编辑
    handleEdit() {
      // 首先判断版本号有无
      if (this.queryParams.versionid !== "") {
        if (this.editFlage) {
          // 编辑时打开编辑权限 按钮变保存
          this.editFlage = !this.editFlage;
          this.handleSelectver();
          this.changeFlage(false);
        } else {
          this.$refs["addform"].validate((valid) => {
            if (valid) {
              this.$refs["tableForm"].validate((throu) => {
                if (throu) {
                  if (this.listform.list.length == 0) {
                    this.$message.error("标准煤折算系数版本最起码需要一条配置");
                  } else {
                    this.$confirm("确认编辑该版本吗?", "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    })
                      .then(() => {
                        this.requestEdit();
                      })
                      .catch(() => {
                        this.$message({
                          type: "info",
                          message: "已取消",
                        });
                      });
                  }
                }
              });
            }
          });
        }
      } else {
        this.$message.warning("编辑必须先确定版本号");
      }
    },
    // todo 请求编辑接口
    requestEdit() {
      let params = {};
      params = this.requestParamsDeal(params);
      editCoalemanage(params)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
          this.editFlage = true;
          this.changeFlage(true);
          // 重新请求版本号的集合(根据ID请求编辑后的该版本)
          this.initializeGet(this.queryParams.versionid);
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!20020");
        });
    },
    //* 新增
    handleAdd() {
      if (this.addFlage) {
        // 新增版本时打开新增权限 清空查询条件 清空表格所有数据并打开新增表格行数的按钮
        this.resetQuery();
        this.resetAdd();
        this.restTable();
        // 默认添加一行 数据结构等接口
        this.listform.list.push(deepClone(this.rowObj));
        this.addFlage = !this.addFlage;
        this.changeFlage(false);
      } else {
        // 确认新增
        this.$refs["queryForm"].validate((tigger) => {
          // 通过版本号校验
          if (tigger) {
            this.$refs["addform"].validate((valid) => {
              // 通过addform校验
              if (valid) {
                if (this.listform.list.length == 0) {
                  this.$message.error("标准煤折算系数版本最起码需要一条配置");
                } else {
                  this.$refs["tableForm"].validate((throu) => {
                    // 通过tableForm校验
                    if (throu) {
                      this.$confirm("确认添加该版本吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                      })
                        .then(() => {
                          this.requestAdd();
                        })
                        .catch(() => {
                          this.$message({
                            type: "info",
                            message: "已取消",
                          });
                        });
                    }
                  });
                }
              }
            });
          }
        });
      }
    },
    // todo 请求新增版本接口
    requestAdd() {
      let params = {};
      params = this.requestParamsDeal(params);
      addCoalemanage(params)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.addFlage = true;
          this.changeFlage(true);
          // 重新请求版本号的集合(根据ID请求新增后的该版本)
          // this.addVersionname = null;
          // this.addVersionname = Number(this.queryParams.versionName);
          this.initializeGet("add");
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!20021");
        });
    },
    //! 新增或编辑参数处理
    requestParamsDeal(params) {
      params.makingUserId = this.$store.state.user.id;
      if (!this.addFlage) {
        params.id = null;
      }
      if (!this.editFlage) {
        params.id = this.queryParams.versionid;
      }
      params.version = this.queryParams.versionName;
      params.website = this.addParams.website;
      params.servicePhone = this.addParams.servicePhone;
      // params.officialFile = this.addParams.officialFile;
      params.officialFileId = this.addParams.officialFileId;
      params.energyConversionFactorCoalDetailVoList = this.listform.list;
      console.log(params, "请求参数");
      return params;
    },
    //* 取消新增或编辑
    handleCancel() {
      this.resetAdd();
      this.restTable();
      this.changeFlage(true);
      // 新增时候取消重新获取版本号默认渲染第一个
      if (!this.addFlage) {
        this.resetQuery();
        this.addFlage = true;
        this.initializeGet();
      }
      // 编辑的时候渲染当前的版本号
      if (!this.editFlage) {
        this.editFlage = true;
        this.initializeGet(this.queryParams.versionid);
      }
    },
    //* 发布
    handlePublish() {
      this.$confirm("确认发布该版本吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.publishRequest();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // todo 发布请求
    publishRequest() {
      let params = {};
      params.id = this.queryParams.versionid;
      params.publishUserId = this.$store.state.user.id;
      params.status = 1;
      console.log(params, "发布参数");
      auditCoalmanage(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "发布成功!",
            });
            this.initializeGet(this.queryParams.versionid);
          }
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!20013");
        });
    },
    // 表格新增一行
    addRow() {
      // 新增版本时打开新增权限才能新增行
      if (!this.addFlage || !this.editFlage) {
        this.listform.list.push(deepClone(this.rowObj));
      }
    },
    // queryParams获取版本名称
    handleSelectver() {
      let id = this.queryParams.versionid;
      this.versionsArr.map((item) => {
        if (item.id === id) {
          this.queryParams.versionName = item.version;
        }
      });
    },
    //* 下载预览按钮
    preview() {
      if (
        this.addParams.officialFileId == "" ||
        this.addParams.officialFileId == null
      ) {
        this.$message.warning("缺少文件");
        return false;
      }
      if (this.officialFileArr.length == 0) {
        this.$message.warning("缺少文件集合或者改文件已查询不到");
        return false;
      } else {
        let num = 0;
        this.officialFileArr.map((item) => {
          if (item.id == this.addParams.officialFileId) {
            if (item.filePath && item.filePath != "") {
              window.open(process.env.VUE_APP_BASE_API + "/" + item.filePath);
            } else {
              this.$message.warning("该文件路径已失效");
              return false;
            }
          } else {
            num++;
          }
        });
        if (num == this.officialFileArr.length) {
          this.$message.warning("该文件未找到");
          return false;
        }
      }
    },
    /* ....................表格相关..................... */
    // 删除
    handleDelete(row) {
      const index = this.listform.list.indexOf(row);
      this.listform.list.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
// @import "@/assets/styles/mixin.scss";
// .scollstyle {
//   // .el-table {
//     // overflow: hidden;
//     // overflow-y: auto;
//     // @include scrollBar2;
//   // }
// }
::v-deep .query-form {
  height: 31px;
}
.energyCoal {
  ::v-deep .el-card__header {
    border-bottom: none;
  }
  // .type-tag {
  //   transform: translateY(-14px);
  // }
  // .cell-span {
  //   // transform: translateY(40px);
  //   transform: translateY(-14px);
  //   // text-align: center;
  // }
  .cell-center {
    // transform: translateY(10px);
    margin-top: 12px;
  }
  .midrow {
    background-color: #f2f2f5;
    margin-bottom: 10px;
  }
  .midcol {
    height: 60px;
    position: relative;
    .el-form-item {
      margin: 9px 0 0 20px;
    }
    .sapn-input {
      width: 250px;
      /*1. 先强制一行内显示文本*/
      white-space: nowrap;
      /*2. 超出的部分隐藏*/
      overflow: hidden;
      /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
    }
  }
  .inline-col {
    display: flex;
    flex-wrap: nowrap;
    ::v-deep .el-form-item__content {
      width: 400px;
    }
    .el-button {
      margin-bottom: 10px;
    }
  }
  .midcolmini {
    height: 42px;
    .el-button {
      margin-bottom: -5px;
    }
  }
  .midbutton {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .table-area {
    margin-top: 10px;
    position: relative;
    .addbutton-area {
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }
}
.button-area-ex {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.table-title {
  margin: 20px 0;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 30px;
  // margin: 10px 0;
  span {
    opacity: 0.8;
  }
}
.versionName-span {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #3669d4;
  line-height: 22px;
}
.versionName-span2 {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #f8d400;
  line-height: 22px;
}
</style>
